<template>
	<view class="container">
		<view class="toget" v-for="(item,index) in arrinfo" key="index" >

			<view class="header" @click="toDetails(item.gid)">
				<view class="Headportrait">
					<image src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-10-06/16:22:29-8b47bee75ce5400792163d304d21f7b4.jpg" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						{{item.userId}}
					</view>
<!-- 					<view class="infotime">
						发布于3小时前 | 岭南师范学院
					</view> -->
				</view>
			</view>
			<view class="cont"  @click="toDetails(item.gid)">
				<view class="Headportrait22">
					<image src="../../static/loveh.png" mode=""></image>
				</view>
				<view class="textb">
					To:{{item.title}}
				</view>

			</view>
			<view class="describe"  @click="toDetails(item.gid)">
				{{item.description}}
			</view>
			<view class="bot" @click="getsomething(item.gid)">
				<!-- v-if="item.heart===0" -->
				<view class="Headportrait33" v-if="item.isLiked!==1"  >
					<image src="../../static/loveheart.png" mode=""></image>
				</view>
				<view class="Headportrait33" v-if="item.isLiked===1" >
					<image src="../../static/loveheart2.png" mode=""></image>
				</view>
			</view>
			
			
		</view>
		
		<uni-popup ref="popup" type="bottom" background-color="#fff" class="todo">
			<view class="uni-comment">
				<view class="uni-comment-list" v-for="(commentsList,index) in commentsList" :key="index">
					<view class="uni-comment-face">
						<image
							src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-10-06/16:22:29-8b47bee75ce5400792163d304d21f7b4.jpg"
							mode="widthFix"></image>
					</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text>{{commentsList.nickname==''||commentsList.nickname==null?'匿名':commentsList.nickname}}</text>
						</view>
						<view class="uni-comment-date">
							<text>{{commentsList.created_at}}</text>
						</view>
						<view class="uni-comment-content">{{commentsList.content}}</view>
					</view>
				</view>
			</view>
			<view class="message">
				<view class="Headportrait">
					<image
						src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-10-06/16:22:29-8b47bee75ce5400792163d304d21f7b4.jpg"
						mode=""></image>
				</view>
				<input class="textbox" placeholder="   看对眼就留言,问问更多细节" />
				<view class="textshare">
					发布
				</view>
				
			</view>
		</uni-popup>
		<uni-section title="指定加载图标样式 - 环形" type="line" @click="onchange">
			<uni-load-more iconType="circle" :status="status" />
		</uni-section>
	</view>
</template>

<script>
	import {
		getLovePosts,apiIsLike,apiToLike
	} from '@/utils/request/api.js'
	export default {
		data() {
			return {
				gid:0,
				status: 'more',
				arrinfo: [],
				commentsList: [{
						nickname: 'DDD',
						content: '好喜欢',
						created_at: '2022/9/13'
					},
					{
						nickname: 'DDD',
						content: '好喜欢',
						created_at: '2022/9/13'
					},
					{
						nickname: 'DDD',
						content: '好喜欢',
						created_at: '2022/9/13'
					},
					{
						nickname: 'DDD',
						content: '好喜欢',
						created_at: '2022/9/13'
					}
				],
				params: {	
						"gid": null,
						"userId": "202108764312"
				},
				paramsdata:{
					pageNum: 1,
					pageSize: 10,
					userId: 202108764312
				}
			}
		},
		onLoad() {
			getLovePosts(this.paramsdata).then(res => {
				console.log(res);
				this.arrinfo = res.data
				console.log(this.arrinfo);
			}).catch(err => {
				console.log(err);
			})
			

		},
		//底部刷新
		onReachBottom() {
			// 让页码值自增 +1
			console.log("已经到底咯，刷新下一页");
			this.paramsdata.pageNum += 1
			// 重新获取列表数据
			getLovePosts(this.paramsdata).then(res => {
		
				this.arrinfo.push(...res.data)
				// console.log(res.data);
				if (res.data.length === 0) {
					this.status = 'nomore'
					// console.log(this.status);
				}
				// console.log(newLists);
			}).catch(err => {
				console.log(err);
			})
		},
		onPullDownRefresh() {
			console.log('触发了下拉刷新')
			setTimeout(() => {
				uni.stopPullDownRefresh()
				this.$router.go(0)
			}, 500)
		},
		methods: {
			toDetails(index) {
				console.log(index);
				// console.log(this.arrinfo[index].gid);
				this.gid = index
				// console.log(this.gid);
				uni.navigateTo({
					// url: '../lostdetails/details?gid=' + this.gid
					url:'../loveWallDetails/loveWallDetails?gid=' + this.gid
				})
			
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			getsomething(gid) {
				this.params.gid=gid
				apiToLike(this.params).then(res=> {
					console.log(res);
				}).catch()
				getLovePosts({
					pageNum: 1,
					pageSize: 50,
					userId: 202108764312
				}).then(res => {
					console.log(res);
					this.arrinfo = res.data
					console.log(this.arrinfo);
					// console.log(newLists);
				}).catch(err => {
					console.log(err);
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f4f4f4;
	}
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;
		padding-top: 15px;
	}

	.toget {
		position: relative;
		width: 94%;
		background-color: #ffffff;
		margin:0px 3%  15px;
		box-shadow: 3px 3px 0px 3px rgba(85, 170, 255, 0.2);
		border-radius: 20px;
		padding: 5px 5px 40px 5px;
		box-sizing: border-box;
	}
	.forlove {
		// display: inline-block;
		// width: 100%;
		// background-color: #9bd7ff;
		// height: 40px;
		font-size: 20px;
		font-weight: 400;
		text-align: center;
		color: rgb(0, 132, 193);
	}
	.title {
		width: 100%;
		height: 40px;
		font-size: 18px;
		font-weight: 400;
		color: rgb(0, 132, 193);
	}



	.bottom {
		position: absolute;
		bottom: 5px;
		left: 10px;
		width: 90%;
		
		.time {
			display: inline-block;

		}

		.bleft {
			display: inline-block;
			float: right;

			.comment {
				display: inline-block;
				float: right;
				width: 50px;
				color: #000000;
				font-size: 17px;
				font-style: italic;
				font-weight: 500;
			}

			.before {
				display: inline-block;
				width: 25px;
				height: 25px;

				image {
					width: 100%;
					height: 100%;
				}
			}


		}

	}

	.uni-comment {
		padding: 5rpx 15rpx;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #e9e7ef;
	}

	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #e9e7ef;
	}

	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}

	.uni-comment-body {
		width: 100%;
	}

	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}

	.uni-comment-top text {
		color: #0A98D5;
		font-size: 16px;
	}

	.uni-comment-date {
		font-size: 15px;
		color: #666666;
		line-height: 38upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
		color: gray;
	}

	.uni-comment-date view {
		color: #666666;
		font-size: 20rpx;
		line-height: 38upx;
	}

	.uni-comment-content {
		line-height: 1.6em;
		font-size: 16px;
		padding: 8rpx 0;
	}

	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}

	.message {
		display: flex;
		margin: 10px;
	}

	.textbox {
		width: 65%;
		height: 40px;
		display: inline-block;
		background-color: #ebebeb;
		margin-left: 10px;
		border-radius: 20px;
		padding-left: 10px;
		margin-top: 10px;
	}

	.Headportrait {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
	}

	.Headportrait image {
		height: 100%;
		width: 100%;
	}
	

	.Headportrait {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
	}

	.Headportrait image {
		height: 100%;
		width: 100%;
	}

	.textshare {
		display: inline-block;
		width: 50px;
		height: 60px;
		line-height: 60px;
		border-radius: 50%;
		font-size: 20px;
		text-align: center;
		color: #0A98D5;
		font-style: italic;
	}
	
	
	// header
	.header {
		display: flex;
		margin:2px 10px 0;
	}
	
	.Headportrait {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		overflow: hidden;
		margin-top: 5px;
	}
	
	.Headportrait image {
		height: 100%;
		width: 100%;
	}
	
	.info {
		display: inline-block;
		height: 40px;
		line-height: 40px;
		margin-left: 10px;
	}
	
	.name {
		height: 40px;
		line-height: 40px;
		margin-bottom: 3px;
		font-size: 15px;
	}
	
	.infotime {
		color: #949494;
		margin-bottom: 10px;
	}
	
	.cont {
		display: flex;
		padding: 0 10px;
	}
	.Headportrait22 {
		display: inline-block;
		width:30px;
		height: 30px;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.Headportrait22 image {
		height: 100%;
		width: 100%;
	}
	
	.textb {
		display: inline-block;
		height: 30px;
		line-height: 30px;
		font-size: 18px;
		color: #d4237a;
		margin-left: 3px;
	}
	
	.describe {
		font-size: 16px;
		// color: #aeaeae;
		// height: 23px;
		// width: 100%;
		margin:2px 15px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.Headportrait33 {
		display: inline-block;
		float: right;
		width:30px;
		height: 30px;
		border-radius: 50%;
		overflow: hidden;
		margin-top: 3px;
		margin-right: 20px;
	}
	
	.Headportrait33 image {
		height: 100%;
		width: 100%;
	}
</style>
